<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query">
            <el-button slot="append" icon="el-icon-search" @click="handleCurrentChange(1)"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table stripe border :data="orderMsg">
        <el-table-column prop="orderId" label="订单号">
        </el-table-column>

        <el-table-column prop="restaurantName" label="店名" width="180">
        </el-table-column>

        <el-table-column prop="orderFoods" label="菜品列表">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <div v-for="food in scope.row.orderFoods">
              <span> {{ food.title }}  :{{ food.count }}份   单价: {{ food.price }}元 打包费:{{scope.row.boxCost}}元
             </span>
              </div>
              <div slot="reference" class="name-wrapper">

                <span >{{ scope.row.orderFoods[0].title }}</span>
                <span v-if="scope.row.orderFoods.length>1">...</span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="totalMoney" width="80" label="总价">
          <template slot-scope="scope">
            {{scope.row.totalMoney}}元
          </template>
        </el-table-column>
        <el-table-column prop="address" label="收货地址"></el-table-column>
        <el-table-column prop="sta"  width="100"label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sta===0" type="success">已完成</el-tag>
            <el-tag v-else-if="scope.row.sta===1" type="warning">已付款</el-tag>
            <el-tag v-else-if="scope.row.sta===2">已接单</el-tag>
            <el-tag v-else-if="scope.row.sta===3">配送中</el-tag>
            <el-tag v-else-if="scope.row.sta===4" type="info">已送达</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.sta===0" @click="myComment(scope.$index, scope.row)">我的评论</el-button>
            <el-button v-else-if="scope.row.sta===3" @click="confirm(scope.$index, scope.row)">确认送达</el-button>
            <el-button v-else-if="scope.row.sta===4" @click="toComment(scope.row)">去评价</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--:current-page 当前页码-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[ 4, 6, 8]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--我的订单表格-->

    <!--评论弹框-->
    <div>
      <el-dialog
          title="评论"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <el-divider></el-divider>
        <!--展示订单情况-->
        <div>
          <!--店名,图片,购买列表-->
          <span>{{ commentOrder.restaurantName }}</span>

          <el-image class="image"
                    :src="commentOrder.restaurantImg"
                    :preview-src-list="[commentOrder.restaurantImg]">
          </el-image>
          <br/>
          <span v-for="food in commentOrder.orderFoods">{{ food.title }}</span>
        </div>
        <!--评分星-->
        <el-rate v-model="rate"></el-rate>
        <!--文字评论-->
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="commentText">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitComment()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Order",
  inject: ['reload'],
  data() {
    return {
      dialogVisible: false,   //订单评论弹框
      orderMsg: [],
      commentOrder: {},
      commentText: "",    //评论
      rate: 0,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 4
      },
      total: 0
    }
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.$axios({
        method: "get",
        url: "/order/myorder",
        params: {
          uid: this.$store.getters.uid,
          query: this.queryInfo.query,
          pagenum: this.queryInfo.pagenum,
          pagesize: this.queryInfo.pagesize
        }
      }).then(response => {
        if (response.data.success) {
          this.orderMsg = response.data.my_order_list;
          console.log(response.data.my_order_list)
          this.total = response.data.total;

        }
      }).catch(error => console.log(error))
    },
    filterTag(value, row) {
      return row.sta === value;
    },
    //关闭评论弹框
    handleClose(done) {
      this.$confirm('确认关闭？').then(_ => {
        done();
      }).catch(_ => {
      });
    },
    toComment(row) {
      this.dialogVisible = true;
      this.commentOrder = row;
      console.log(this.commentOrder)
    },
    //发表评论
    submitComment() {
      this.dialogVisible = false;
      this.$axios({
        method: "post",
        url: "/order/comment",
        data: {
          orderId: this.commentOrder.id,
          userId: this.$store.getters.uid,
          restaurantId: this.commentOrder.restaurantId,
          content: this.commentText,
          rate: this.rate
        }
      }).then(response => {
        this.dialogVisible = false;
        this.getOrderList();
      }).catch(error => console.log(error))
    },
    //确认送达
    confirm(index, row) {
      this.$axios({
        method: "get",
        url: "/order/confirm",
        params: {
          id: row.id
        }
      }).then(response => {
        this.getOrderList();
      }).catch(error => console.log(error))
    },
    myComment(index, row) {
      this.$axios({
        method: "get",
        url: "/order/mycomment",
        params: {
          id: row.id
        }
      }).then(response => {
        if (response.data.success) {
          this.$notify({
            title: response.data.rate + '星',
            message: response.data.content,
            duration: 0
          });
        }
      }).catch(error => console.log(error))
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderList();
    },
    //监听 页码值 改变事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getOrderList();
    },
  }
}
</script>

<style scoped>
.image {
  width: 100px;
  display: block;
  text-align: center;
  margin: auto;
}
</style>
